<template>
	<view class="oil-container">
		<view>{{this.msg}}</view>
		<view class="oil-item">
			<text>类型:</text>
			<uni-data-picker :localdata="dataTree" v-model="type_desc" @change="onchange"></uni-data-picker>
		</view>
		<view class="oil-item">
			<text class="text">省份:{{this.province}}</text>
			<text class="text">92号汽油:￥{{this.Gasoline92}}</text>
			<text class="text">95号汽油:￥{{this.Gasoline95}}</text>
			<text class="text">98号汽油:￥{{this.Gasoline98}}</text>
			<text class="text">柴油:￥{{this.Diesel0}}</text>
			<text class="text">更新时间:{{this.UpdateTime}}</text>
		</view>
		<view>
			<button type="primary" @click="getOilPrice">查询</button>
		</view>
	</view>
</template>

<script>
	import service from '../../utils/http.js'
	export default {
		data() {
			return {
				info: {},
				msg: '',
				province: '河北', //省份
				Gasoline92: '0',
				Gasoline95: '0',
				Gasoline98: '0',
				Diesel0: '0',
				UpdateTime: '',
				dataTree: [{ //备注：一级菜单中的value与二级菜单中的value不能重复;
				//备注：不知道为什么，最多只能显示3个下拉数据??
						text: "河北",
						value: "河北"
					},
					{
						text: "北京",
						value: "北京"
					}
				],
				type_desc: ''
			}
		},
		onLoad() {
			this.getOilPrice()
		},
		methods: {
			onchange(e) {
				this.province = e.detail.value[0].value
			},
			getOilPrice() {
				service.get('/api/common/GasolinePriceQuery')
					.then(response => {
						const region = this.province
						this.msg = response.msg
						const result = response.result
						this.info = result.filter(function(oil) {
							return oil.Region == region
						})
						this.Gasoline92 = this.info[0].Gasoline92
						this.Gasoline95 = this.info[0].Gasoline95
						this.Gasoline98 = this.info[0].Gasoline98
						this.Diesel0 = this.info[0].Diesel0
						this.UpdateTime = this.info[0].UpdateTime
					})
					.catch(error => {
						console.error(error);
					});
			}
		}
	}
</script>

<style lang="scss">
	.oil-container {
		margin: 0 20px 0 20px;

		.oil-item {
			display: flex;
			flex-direction: column;

			.text {
				height: 30px;
			}
		}
	}
</style>